'use client'

import { useState } from 'react'
import { Heart } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { toast } from 'react-hot-toast'
import api from '@/lib/api'

interface FavoriteButtonProps {
  spotId: number
  isFavorited: boolean
  onToggle: () => void
}

export default function FavoriteButton({ spotId, isFavorited, onToggle }: FavoriteButtonProps) {
  const [isLoading, setIsLoading] = useState(false)

  const handleClick = async () => {
    try {
      setIsLoading(true)
      if (isFavorited) {
        await api.delete(`/api/favorites/${spotId}`)
        toast.success('取消收藏成功')
      } else {
        await api.post(`/api/favorites/${spotId}`)
        toast.success('收藏成功')
      }
      onToggle()
    } catch (error: any) {
      toast.error(error.response?.data?.detail || '操作失败')
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <Button
      variant="ghost"
      size="icon"
      onClick={handleClick}
      disabled={isLoading}
      className={`${isFavorited ? 'text-red-500 hover:text-red-600' : 'text-gray-500 hover:text-gray-600'}`}
    >
      <Heart className="h-5 w-5" fill={isFavorited ? 'currentColor' : 'none'} />
    </Button>
  )
} 